<!--
 * @Author: your name
 * @Date: 2021-01-26 15:01:05
 * @LastEditTime: 2021-01-27 10:54:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \undefinedc:\Users\user\Desktop\map.html
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>更新实时要素</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <p>120</p>
    <p>120</p>
    <!-- <p>120</p>
    <p>120</p>
    <p>120</p>
    <p>120</p> -->
    <div id='map'></div>

    <svg width="720" height="120">
        <circle cx="40" cy="60" r="30" style="fill:steelblue;"></circle>
        <circle cx="80" cy="60" r="30" style="fill:steelblue;"></circle>
        <circle cx="120" cy="60" r="30" style="fill:steelblue;"></circle>
    </svg>
    <script src='http://d3js.org/d3.v3.min.js' charset='utf-8'></script>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1Ijoiemh1MTIxMzgiLCJhIjoiY2trZG5zZ28yMDRqdzJ3bzU2eGQxNjU3cCJ9.mSwtLkCHXpcEIZZPxGoJog';
        // d3.select("body").style("background-color", "black");  // 直接选择 ->并设置属性
        // d3.selectAll("p").style("color", function() { // 选择 -> 动态设置属性
        //   return "hsl(" + Math.random() * 360 + ",100%,50%)";
        // });
        // d3.selectAll("p") // 选择 -> 绑定数据 -> 动态设置属性
        //   .data([4, 8, 15, 16, 23, 42])
        //     .style("font-size", function(d) { return d + "px"; });

        // var paragraphs = document.getElementsByTagName("p");
        // for (var i = 0; i < paragraphs.length; i++) {
        //   var paragraph = paragraphs.item(i);
        //   paragraph.style.setProperty("color", "blue", null);
        // }

        // d3.select("body")
        //     .selectAll("p")
        //     .data([4, 8, 15, 16, 23, 42])
        //     .enter().append("p")
        //     .text(function (d) { return " number " + d + "!"; });

        // var p = d3.select("body") // 直接把数据绑定到Dom并输出，数组元素个数与p节点的个数一致就全部更新文本，如果不一致，就只更新现有p节点的文本，多余的数据会被保存起来，看下面会用到
        //     .selectAll("p")
        //     .data([4, 8, 15, 16, 23, 42])
        //     .text(function (d) { return d; });

        // d3.selectAll("circle").transition()
        //     .duration(750)
        //     .delay(function (d, i) { return i * 10; })
        //     .attr("r", function (d) { return Math.sqrt(d * scale); });

        // d3.select("body").transition()
        //     .style("background-color", "black");


        var circle = d3.selectAll("circle")
        // circle.style("fill", "steelblue");
        // circle.attr("r", 30);

        circle.data([32, 57, 112]);
        setInterval(() => {
           circle.attr("r", function(d) { return Math.sqrt(d); });
        }, 1000)
        console.log('213');
        
    </script>

</body>

</html>